Angular 專案使用 Font Awesome Free Icon

紀錄 Angular 依 Web Fonts 使用 Font Awesome，依據 Font Awesome Docs 中得知 開源(Free)版本為 fontawesome-free 可使用 free-solid-svg-icons 、 free-regular-svg-icons 及 free-brands-svg-icons，

安裝 Font Awesome 6 套件

# terminal

npm i @fortawesome/fontawesome-free

Angular 載入 Font Awesome 6

# src/styles.scss

...
// 載入 Font Awesome
// fa-font-path 設定原由，請參閱 SASS 無法解析 CSS 文章
$fa-font-path: '../node_modules/@fortawesome/fontawesome-free/webfonts';
@import "@fortawesome/fontawesome-free/scss/fontawesome";
@import "@fortawesome/fontawesome-free/scss/solid";
@import "@fortawesome/fontawesome-free/scss/brands";
@import "@fortawesome/fontawesome-free/scss/regular";
...

使用方式

example.html

# example.html

...
<i class="fa-solid fa-house"></i>
...

參考資料

1. Font Awesome Doc